<f:view xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:aui="http://liferay.com/faces/aui"
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:bridge="http://liferay.com/faces/bridge"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<h:head />
	<h:body>
		<f:event listener="#{materialController.loadData}" type="javax.faces.event.PreRenderComponentEvent" />
		<h:form id="materialListForm">
			<ui:include src="/jsf/appointment/common/appointment_information.xhtml" />
			<h:panelGroup styleClass="materialPanelGroup" >
				
				<p:dataTable id="articleTable" styleClass="electroOfficeTable"
			    			 var="article" value="#{articleController.eldasArticles}"
			    			 scrollable="true"
			                 filteredValue="#{articleController.filteredArticles}"
			                 emptyMessage="Keine ELDAS Artikel für diesen Auftrag erfasst"
			                 currentPageReportTemplate="{totalRecords} Artikel gefunden"
			                 widgetVar="articleWidget" >
			                 
			        <f:facet id="headerFacet" name="header" styleClass="headerFacet" >
				    	<p:inputText id="globalFilter" onkeyup="articleWidget.filter()" placeholder="Suche" style="width:150px" />
				    	<p:selectOneRadio id="materialIdentifier" value="#{articleController.matierialIdentifier}" onchange="articleWidget.filter()" >
				            <f:selectItems value="#{articleController.materialIdentifiers}" var="identifier" itemLabel="#{identifier.name}" itemValue="#{identifier.name}"/>
				        </p:selectOneRadio>
			        </f:facet>
					
					<p:column headerText="E-Nr." width="80px"
		        			sortBy="#{article.eNumber}"
		        			filterBy="#{article.eNumber}"
		        			filterMatchMode="contains"
		        			rendered="#{!empty article.eNumber}" >
		        		<h:outputText value="#{article.eNumber}" />
			        </p:column>
			        <p:column headerText="E-Nr." width="80px"
		        			sortBy="#{article.articleNumber}"
		        			filterBy="#{article.articleNumber}"
		        			filterMatchMode="contains"
		        			rendered="#{!empty article.articleNumber}" >
		        		<h:outputText value="#{article.articleNumber}" />
			        </p:column>
		        	<p:column headerText="Artikel" width="450px"
		        			sortBy="#{article.description}"
		        			filterBy="#{article.description}"
		        			filterMatchMode="contains" >
		        		<h:outputText value="#{article.description}" />
			        </p:column>
			        <p:column display="none"
		        			filterBy="#{article.materialIdentifier.name}"
		        			filterMatchMode="equals" >
		        		<h:outputText value="#{article.materialIdentifier.name}" />
			        </p:column>
			    </p:dataTable>
			</h:panelGroup>
			<h:panelGroup styleClass="appointmentMaterialPanelGroup" >
				<!-- Material Table for Eldas Articles -->
			    <p:dataTable id="eldasArticleTable" styleClass="electroOfficeTable"
			    			 var="eldasArticle" value="#{articleController.eldasArticles}"
			                 paginator="true" rows="10"
			                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			                 rowsPerPageTemplate="5,10,15,25,50"
			                 filteredValue="#{articleController.filteredEldasArticles}"
			                 emptyMessage="Keine ELDAS Artikel für diesen Auftrag erfasst"
			                 currentPageReportTemplate="Seite {currentPage} von {totalPages}"
			                 widgetVar="eldasArticleWidget" >
			                 
			        <f:facet id="headerFacet" name="header" styleClass="headerFacet" >
				    	<p:inputText id="globalFilter" onkeyup="eldasArticleWidget.filter()" placeholder="Suche" style="width:150px" />
			        </f:facet>
					
					<p:column headerText="E-Nr." width="80px"
		        			sortBy="#{eldasArticle.eNumber}" 
		        			filterBy="#{eldasArticle.eNumber}"
		        			filterMatchMode="contains" 
		        			id="eNumber" >
		        		<h:outputText value="#{eldasArticle.eNumber}" />
			        </p:column>
		        	<p:column headerText="Artikel" width="450px" 
		        			sortBy="#{eldasArticle.description}"
		        			filterBy="#{eldasArticle.description}"
		        			filterMatchMode="contains"
		        			id="eldasDescription" >
		        		<h:outputText value="#{eldasArticle.description}" />
			        </p:column>
			        <p:column headerText="Menge" width="50px"
		        			sortBy="#{eldasArticle.quantity}" 
		        			filterBy="#{eldasArticle.quantity}"
		        			filterMatchMode="contains" 
		        			id="eldasQuantity" >
		        		<h:outputText value="#{eldasArticle.quantity}" />
			        </p:column>
			        <p:column headerText="Einheit" width="50px"
		        			sortBy="#{eldasArticle.uom}" 
		        			filterBy="#{eldasArticle.uom}"
		        			filterMatchMode="contains" 
		        			id="eldasUom" >
		        		<h:outputText value="#{eldasArticle.uom}" />
			        </p:column>
			    </p:dataTable>
			    
			    <!-- Material Table for Steiger Articles -->
			    <p:dataTable id="steigerArticleTable" styleClass="electroOfficeTable"
			    			 var="steigerArticle" value="#{articleController.steigerArticles}"
			                 paginator="true" rows="10"
			                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
			                 rowsPerPageTemplate="5,10,15,25,50"
			                 filteredValue="#{articleController.filteredSteigerArticles}"
			                 emptyMessage="Keine Steiger Artikel für diesen Auftrag erfasst"
			                 currentPageReportTemplate="Seite {currentPage} von {totalPages}"
			                 widgetVar="steigerArticleWidget" >
			                 
			        <f:facet id="headerFacet" name="header" styleClass="headerFacet" >
				    	<p:inputText id="globalFilter" onkeyup="steigerArticleWidget.filter()" placeholder="Suche" style="width:150px" />
			        </f:facet>
					
					<p:column headerText="Artikel-Nr." width="80px"
		        			sortBy="#{steigerArticle.articleNumber}" 
		        			filterBy="#{steigerArticle.articleNumber}"
		        			filterMatchMode="contains" 
		        			id="articleNumber" >
		        		<h:outputText value="#{steigerArticle.articleNumber}" />
			        </p:column>
		        	<p:column headerText="Artikel" width="450px" 
		        			sortBy="#{steigerArticle.description}"
		        			filterBy="#{steigerArticle.description}"
		        			filterMatchMode="contains"
		        			id="steigerDescription" >
		        		<h:outputText value="#{steigerArticle.description}" />
			        </p:column>
			        <p:column headerText="Menge" width="50px"
		        			sortBy="#{steigerArticle.quantity}" 
		        			filterBy="#{steigerArticle.quantity}"
		        			filterMatchMode="contains" 
		        			id="steigerQuantity" >
		        		<h:outputText value="#{steigerArticle.quantity}" />
			        </p:column>
			        <p:column headerText="Einheit" width="50px"
		        			sortBy="#{steigerArticle.uom}" 
		        			filterBy="#{steigerArticle.uom}"
		        			filterMatchMode="contains" 
		        			id="eldasUom" >
		        		<h:outputText value="#{steigerArticle.uom}" />
			        </p:column>
			    </p:dataTable>
		    </h:panelGroup>
		</h:form>
	</h:body>
</f:view>